<template>
  <div class="role-list-container">
    <!-- 页面标题和操作按钮 -->
    <div class="page-header">
      <h1>角色管理</h1>
      <div class="action-buttons">
        <el-button type="primary" @click="handleAddRole">
          <el-icon><Plus /></el-icon> 新增角色
        </el-button>
        <el-button @click="handleImport">
          <el-icon><Upload /></el-icon> 导入
        </el-button>
        <el-button @click="handleExport">
          <el-icon><Download /></el-icon> 导出
        </el-button>
        <el-dropdown @command="handleBatchOperation">
          <el-button>
            <el-icon><More /></el-icon> 批量操作
            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="delete">删除所选</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!-- 搜索表单 -->
    <el-card class="search-card">
      <el-form :model="searchForm" class="search-form" size="small">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="角色名称" prop="name">
              <el-input v-model="searchForm.name" placeholder="请输入角色名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="角色编码" prop="code">
              <el-input v-model="searchForm.code" placeholder="请输入角色编码" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态" prop="status">
              <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="search-buttons">
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 角色表格 -->
    <el-card class="table-card">
      <el-table
        v-loading="loading"
        :data="roleList"
        @selection-change="handleSelectionChange"
        border
        stripe
        size="small"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
        <el-table-column prop="name" label="角色名称" min-width="120"></el-table-column>
        <el-table-column prop="code" label="角色编码" min-width="120"></el-table-column>
        <el-table-column prop="description" label="角色描述" min-width="180"></el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          min-width="100"
          align="center"
        >
          <template #default="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
              {{ scope.row.status === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="userCount" label="用户数量" min-width="100" align="center"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="160"></el-table-column>
        <el-table-column label="操作" min-width="220" align="center">
          <template #default="scope">
            <el-button size="small" @click="handleView(scope.row)">查看</el-button>
            <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="info" @click="handlePermissions(scope.row)">权限配置</el-button>
            <el-button
              size="small"
              :type="scope.row.status === 1 ? 'danger' : 'success'"
              @click="handleStatusChange(scope.row)"
            >
              {{ scope.row.status === 1 ? '禁用' : '启用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页控件 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import {
  Plus,
  Upload,
  Download,
  More,
  ArrowDown
} from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';

// 路由实例
const router = useRouter();

// 状态管理
const loading = ref<boolean>(false);
const roleList = ref<any[]>([]);
const selectedRoleIds = ref<string[]>([]);

// 搜索表单
const searchForm = reactive({
  name: '',
  code: '',
  status: ''
});

// 分页配置
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

// 选择项变化
const handleSelectionChange = (selection: any[]) => {
  selectedRoleIds.value = selection.map(item => item.id);
};

// 搜索
const handleSearch = () => {
  pagination.currentPage = 1;
  getRoleList();
};

// 重置搜索
const resetSearch = () => {
  Object.assign(searchForm, {
    name: '',
    code: '',
    status: ''
  });
  pagination.currentPage = 1;
  getRoleList();
};

// 分页大小变化
const handleSizeChange = (val: number) => {
  pagination.pageSize = val;
  getRoleList();
};

// 当前页变化
const handleCurrentChange = (val: number) => {
  pagination.currentPage = val;
  getRoleList();
};

// 查看角色
const handleView = (row: any) => {
  router.push({ name: 'RoleDetail', params: { id: row.id } });
};

// 编辑角色
const handleEdit = (row: any) => {
  router.push({ name: 'RoleEdit', params: { id: row.id } });
};

// 权限配置
const handlePermissions = (row: any) => {
  router.push({ name: 'RolePermission', params: { id: row.id } });
};

// 新增角色
const handleAddRole = () => {
  router.push({ name: 'RoleAdd' });
};

// 切换角色状态
const handleStatusChange = async (row: any) => {
  const newStatus = row.status === 1 ? 0 : 1;
  const statusText = newStatus === 1 ? '启用' : '禁用';
  const confirmText = `确定要${statusText}角色